<script>
import { main } from '@/util/mixins'
import { mapState } from 'vuex'
import * as service from 'services/x-start/mgr/race'
import { getList as deviceList } from 'services/x-start/mgr/device'

export default {
  mixins: [main],
  data() {
    return {
      service,
      timePick: null,
      devicesList: [],
    }
  },
  created() {
    this.getDeviceList()
  },
  computed: {
    ...mapState({
      typeList: state => state.sportList,
    }),
  },
  methods: {
    getDeviceList() {
      deviceList().then(res => {
        this.devicesList = res.data
      })
    },
    sortChange(val) {
      // const { column, ...data } = val
      this.getList({ val })
    },
    getMatch(id) {
      return (
        this.typeList.find(item => item.id == id) &&
        this.typeList.find(item => item.id == id).sportName
      )
    },
    change(data) {
      if (data) {
        this.detailInfo.startTime = data[0]
        this.detailInfo.endTime = data[1]
      }
    },
  },
}
</script>

<template lang="pug">
Template(@sizeChange="handleSizeChange" @currentChange="handleCurrentChange" :total="total" ref="child" width="550px")
  span(slot="title") 赛事管理
  .btns(slot="rightBtn")
    el-button(size="mini" type="primary" plain @click="detail()") 新建赛事
  .list(slot="list")
    el-table(ref="table"
      stripe
      :data="tableData"
      tooltip-effect="dark"
      fit
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
    )
      el-table-column(prop="name" label="赛事名称" )
      el-table-column(label="开始时间" )
        template(slot-scope="{row}")
          span {{row.startTime|formatTime}}
      el-table-column(label="结束时间")
        template(slot-scope="{row}")
          span {{row.endTime|formatTime}}
      el-table-column(label="赛事类型")
        template(slot-scope="{row}")
          span {{getMatch(row.type)}}
      el-table-column(label="设备名称")
        template(slot-scope="{row}")
          span(v-for="item in row.equipmentList") {{item.name}} 
      el-table-column(prop="area"  label="区域")
      el-table-column(label="操作" fixed="right")
        template(slot-scope="{row}")
          Icon(title="删除" type="icon-delete" @click="del(row.id)")
  .detail(slot="detail")
    .group
      .label.must 赛事名称：
      .right
        input.form-control(size="small" v-va="{ type:'required' }" vali="" v-model="detailInfo.name")
    .group 
      .label.must 时间范围：
      TimePick(@getTime="change")
    .group 
      .label.must 赛事类型：
      .right
        el-select(v-model="detailInfo.type" placeholder="请选择")
          el-option(v-for="item in typeList"
            :key="item.sportName"
            :label="item.sportName"
            :value="item.id"
          )
    .group 
      .label.must 设备管理：
      .right
        el-select(v-model="detailInfo.equipments" multiple placeholder="请选择")
          el-option(v-for="item in devicesList"
            :key="item.name"
            :label="item.name"
            :value="item.id"
          )
    .group 
      .label 赛事区域：
      .right
        el-input.width( v-model="detailInfo.area")
</template>

<style lang="stylus" scoped>
.data
  display inline-block
  line-height 40px
  li
    display inline-block
    cursor pointer
    margin-right 20px
    &.active
      color #FF6D60
</style>